<template>
  <div class="resource-logs">
    <div class="logs-header">
      <h4>操作日志</h4>
      <a-space>
        <a-select
          v-model:value="logType"
          placeholder="日志类型"
          style="width: 120px"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="CREATE">创建</a-select-option>
          <a-select-option value="UPDATE">更新</a-select-option>
          <a-select-option value="DELETE">删除</a-select-option>
          <a-select-option value="ACCESS">访问</a-select-option>
        </a-select>
        <a-button size="small" @click="handleRefresh">
          <IconifyIcon icon="mdi:refresh" />
          刷新
        </a-button>
      </a-space>
    </div>

    <div class="logs-content">
      <a-timeline>
        <a-timeline-item
          v-for="log in filteredLogs"
          :key="log.id"
          :color="getLogColor(log.type)"
        >
          <template #dot>
            <IconifyIcon :icon="getLogIcon(log.type)" />
          </template>

          <div class="log-item">
            <div class="log-header">
              <span class="log-type">
                <a-tag :color="getLogColor(log.type)" size="small">
                  {{ getLogTypeText(log.type) }}
                </a-tag>
              </span>
              <span class="log-time">{{
                formatDateTime(log.create_time)
              }}</span>
            </div>
            <div class="log-content">
              <div class="log-message">{{ log.message }}</div>
              <div class="log-details">
                <span class="log-user">操作人: {{ log.operator }}</span>
                <span class="log-ip">IP: {{ log.ip_address }}</span>
              </div>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>

      <div v-if="filteredLogs.length === 0" class="empty-state">
        <a-empty description="暂无日志记录" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { IconifyIcon } from '@vben/icons';
import type { ResourceItem } from '#/api/resource-center';

interface Props {
  resource: ResourceItem | null;
}

const props = defineProps<Props>();

const logType = ref('');

// 模拟日志数据
const resourceLogs = ref([
  {
    id: '1',
    type: 'CREATE',
    message: '资源创建成功',
    operator: 'admin',
    ip_address: '192.168.1.100',
    create_time: '2024-01-15 10:30:00',
  },
  {
    id: '2',
    type: 'UPDATE',
    message: '更新资源属性配置',
    operator: 'user001',
    ip_address: '192.168.1.101',
    create_time: '2024-01-15 14:20:00',
  },
  {
    id: '3',
    type: 'ACCESS',
    message: '查看资源详情',
    operator: 'user002',
    ip_address: '192.168.1.102',
    create_time: '2024-01-15 16:45:00',
  },
  {
    id: '4',
    type: 'UPDATE',
    message: '修改计价策略',
    operator: 'admin',
    ip_address: '192.168.1.100',
    create_time: '2024-01-16 09:15:00',
  },
]);

const filteredLogs = computed(() => {
  if (!logType.value) {
    return resourceLogs.value;
  }
  return resourceLogs.value.filter((log) => log.type === logType.value);
});

const getLogColor = (type: string) => {
  switch (type) {
    case 'CREATE':
      return 'green';
    case 'UPDATE':
      return 'blue';
    case 'DELETE':
      return 'red';
    case 'ACCESS':
      return 'orange';
    default:
      return 'default';
  }
};

const getLogIcon = (type: string) => {
  switch (type) {
    case 'CREATE':
      return 'mdi:plus-circle';
    case 'UPDATE':
      return 'mdi:pencil-circle';
    case 'DELETE':
      return 'mdi:delete-circle';
    case 'ACCESS':
      return 'mdi:eye-circle';
    default:
      return 'mdi:information';
  }
};

const getLogTypeText = (type: string) => {
  switch (type) {
    case 'CREATE':
      return '创建';
    case 'UPDATE':
      return '更新';
    case 'DELETE':
      return '删除';
    case 'ACCESS':
      return '访问';
    default:
      return '未知';
  }
};

const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN');
};

const handleRefresh = () => {
  // 刷新日志数据
  console.log('刷新日志');
};
</script>

<style lang="less" scoped>
.resource-logs {
  .logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h4 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .logs-content {
    .log-item {
      .log-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .log-time {
          color: #666;
          font-size: 12px;
        }
      }

      .log-content {
        .log-message {
          font-weight: 500;
          margin-bottom: 4px;
        }

        .log-details {
          display: flex;
          gap: 16px;
          font-size: 12px;
          color: #666;

          .log-user,
          .log-ip {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
    }

    .empty-state {
      padding: 40px 0;
      text-align: center;
    }
  }
}
</style>
